<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>用户管理</title>
<!-- Tell the browser to be responsive to screen width -->
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet"
	href="../../resources/font-awesome-4.3.0/css/font-awesome.min.css">
<!-- DataTables -->
<link rel="stylesheet"
	href="../../plugins/datatables/dataTables.bootstrap.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../dist/css/AdminLTE.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="../../dist/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="../role/css/role.css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body clbass="hold-transition skin-blue">
	<div ng-app ="roleApp" ng-controller="roleController" >
	<div class="wrapper">


		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper content-wrapper-custom">
			<section class="content-header">
				<h1>角色管理</h1>
				<ol class="breadcrumb">
					<li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
					<li class="">系统管理</li>
					<li class="active">角色管理</li>
				</ol>
			</section>
			<!-- Main content -->
			<section class="content">
				<div class="row">
					<div class="col-xs-12">
						<div class="box">
							<div class="box-header">
								<h3 class="box-title">查询条件</h3>
							</div>
							<div>
								<!-- form start -->
								<form id="queryForm" class="form-horizontal">
									<div class="row">
										<div class="col-xs-4 ">
											<div class="form-group">
												<label for="role_name_query"
													class="control-label col-xs-4 padding-0">角色名称</label>
												<div class="col-xs-8 ">
													<input class="form-control input-sm padding-0" type="text"
														id="role_name_query" name="role_name_query" placeholder="输入角色名称" />
												</div>
											</div>
										</div>
										<div class="col-xs-4  ">
											<div class="form-group ">
												<label for="org_name_query"
													class="col-xs-4 control-label padding-0">组织名称</label>
												<div class="col-xs-8 ">
													<input class="form-control input-sm padding-0" type="text"
														id="org_name_query" name="org_name_query" placeholder="输入组织名称" />
												</div>
											</div>
										</div>
										<div class="col-xs-4 ">
											<div class="form-group">
												<label for="level_query"
													class="control-label col-xs-4  padding-0">角色等级</label>
												<div class="col-xs-8">
													<select id="level_query" name="level_query" class="selectpicker show-tick form-control" >
														<option value="" selected></option>
														<option value="1">一级</option>
														<option value="2">二级</option>
														<option value="3">三级</option>
													</select>	
												</div>
											</div>
										</div>
									</div>

									<div class="row">
										<div class="col-xs-4">
											<div class="form-group">
												<label for="auth_template_name_query" class="control-label col-xs-4 padding-0">模板名称</label>
												<div class="col-xs-8">
													<input class="form-control input-sm" type="text"
														id="auth_template_name_query" name="auth_template_name_query" placeholder="输入模板名称"/>
												</div>
											</div>
										</div>
										<div class="col-xs-4">
											<div class="form-group">
												<div class="col-xs-8" align="center">
													<button type="submit" class="btn btn-default  margin-5" ng-click="query()">查询角色</button>
												</div>
											</div>
										</div>
									</div>
									
								</form>
							</div>
						</div>

						<div class="box">

							<!-- /.box-header -->
							<div class="box-body">
								<div>
									<button type="submit" class="btn btn-default  margin-5"
										data-toggle="modal" data-target="#myModal">增加角色</button>
									<button type="submit" class="btn btn-default  margin-5"
										ng-click="update_init()">修改角色信息</button>
									<button type="submit" class="btn btn-default  margin-5" ng-click ="del_init()">删除角色</button>
								</div>
								<table id="role_table"
									class="table table-bordered table-striped table-condensed">
									<thead>
										<tr>
											<th width="5px"><input name="items" type="checkbox" id="checkall" /></th>
											<th>角色ID</th>
											<th>角色名称</th>
											<th>角色等级</th>
											<th>组织名称</th>
											<th>模板名称</th>
										</tr>
									</thead>
								</table>
							</div>
							<!-- /.box-body -->
						</div>
						<!-- /.box -->
					</div>
					<!-- /.col -->
				</div>
				<!-- /.row -->
			</section>
			<!-- /.content -->
		</div>
		<!-- /.content-wrapper -->

	</div>
	<div class="modal fade" id="alertModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true" align="center">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<div id="SelAlert" class="alert alert-danger form-group" style="margin-top: 10px" 
						role="alert" align="center">
							<strong>请选择记录进行删除！</strong>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true" >
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">新增</h4>
				</div>
				<div class="modal-body">
					<form id="addForm" class="form-horizontal">
					<div class="col-xs-12">
						<div id="addSuccessAlert" class="alert alert-success form-group" role="alert" hidden="true" align="center">
   							<strong>新增成功！</strong>
						</div>
					</div>
					<div class="col-xs-12">
						<div id="addFailedAlert" class="alert alert-danger form-group" role="alert" hidden="true" align="center">
   							<strong>新增失败！</strong>
						</div>
					</div>
					<div class="form-group">
						<label for="rolename" class="control-label col-xs-3 padding-0">角色名称</label>
						<div class="col-xs-9">
							<input type="text" class="form-control" id="rolename" name = "rolename" placeholder="角色名称">
						</div>
					</div>
					<div class="form-group">
						<label for="level" class="control-label col-xs-3 padding-0">等级</label>
						<div class="col-xs-9">
							<select id="level" name="level" class="selectpicker show-tick form-control" >
								<option value="1" >一级</option>
								<option value="2" >二级</option>
								<option value="3" >三级</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="org_id" class="control-label col-xs-3 padding-0">组织名称</label>
						<div class="col-xs-9">
							<select id="org_id" name="org_id" class="selectpicker show-tick form-control" >
								<option value="" selected>
								</option>
								<option ng-repeat="org in orgList" value={{org.ORG_ID}}>
									{{org.NAME}}
								</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="auth_template_id" class="control-label col-xs-3 padding-0">权限模板</label>
						<div class="col-xs-9">
							<select id="auth_template_id" name="auth_template_id" class="selectpicker show-tick form-control" >
								<option value="" selected>
								</option>
								<option ng-repeat="authTemplate in authTemplateList" value={{authTemplate.AUTH_ID}}>
									{{authTemplate.NAME}}
								</option>
							</select>
						</div>
					</div>
					</form>
				</div>
				
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="submit" class="btn btn-primary" id="save" ng-click="add()">保存</button>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="myModal2" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true" >
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">修改</h4>
				</div>
				<div class="modal-body">
					<form id="updateForm" class="form-horizontal">
					<input hidden="true" id="role_id_update" name="role_id_update" value="{{role_id_update}}">
					<div class="col-xs-12">
						<div id="updateSuccessAlert" class="alert alert-success form-group" role="alert" hidden="true" align="center">
   							<strong>修改成功！</strong>
						</div>
					</div>
					<div class="col-xs-12">
						<div id="updateFailedAlert" class="alert alert-danger form-group" role="alert" hidden="true" align="center">
   							<strong>修改失败！</strong>
						</div>
					</div>
					<div class="form-group">
						<label for="rolename_update" class="control-label col-xs-3 padding-0">角色名称</label>
						<div class="col-xs-9">
							<input type="text" class="form-control" id="rolename_update" name = "rolename_update" 
								value="{{rolename_update}}">
						</div>
					</div>
					<div class="form-group">
						<label for="level_update" class="control-label col-xs-3 padding-0">等级</label>
						<div class="col-xs-9">
							<select id="level_update" name="level_update" class="selectpicker show-tick form-control" >
								<option value="1" >一级</option>
								<option value="2" >二级</option>
								<option value="3" >三级</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="org_id_update" class="control-label col-xs-3 padding-0">组织名称</label>
						<div class="col-xs-9">
							<select id="org_id_update" name="org_id_update" class="selectpicker show-tick form-control" >
								<option value="{{org_id_update}}" selected>
									{{org_name_update}}
								</option>
								<option ng-repeat="org in orgList" value={{org.ORG_ID}}>
									{{org.NAME}}
								</option>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label for="auth_template_id_update" class="control-label col-xs-3 padding-0">权限模板</label>
						<div class="col-xs-9">
							<select id="auth_template_id_update" name="auth_template_id_update" class="selectpicker show-tick form-control" >
								<option value="{{auth_template_id_update}}" selected>
									{{auth_template_name_update}}
								</option>
								<option ng-repeat="authTemplate in authTemplateList" value={{authTemplate.AUTH_ID}}>
									{{authTemplate.NAME}}
								</option>
							</select>
						</div>
					</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="submit" class="btn btn-primary" id="save" ng-click="update()">修改</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 删除提示模态框 -->
	<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" 
   		aria-labelledby="myModalLabel" aria-hidden="true" align="center">
   		<div class="modal-dialog">
      		<div class="modal-content">
         		<div class="modal-header">
            		<button type="button" class="close" 
               			data-dismiss="modal" aria-hidden="true">
							&times;
					</button>
            		<h4 class="modal-title" id="myModalLabel">
               			删除提示
            		</h4>
         		</div>
         		<div class="modal-body" align="center">
         			<div id="deleteSuccessAlert" class="alert alert-success form-group" role="alert" hidden="true" align="center">
   						<strong>删除成功！</strong>
					</div>
					<div id="deleteFailedAlert" class="alert alert-danger form-group" role="alert" hidden="true" align="center">
   						<strong>删除失败！</strong>
					</div>
					<div id="promptContent">确认删除？</div>
            		
         		</div>
         		<div class="modal-footer">
            		<button type="button" class="btn btn-default"  
			             data-dismiss="modal">关闭
            		</button>
            		<button id="del" type="button" class="btn btn-primary" ng-click="del()">
               			确认删除
            		</button>
         		</div>
      		</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>
	<!-- 删除提示模态框 -->
	
	</div>
	<!-- ./wrapper -->

	<!-- jQuery 2.1.4 -->
	<script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
	<!-- Bootstrap 3.3.5 -->
	<script src="../../bootstrap/js/bootstrap.min.js"></script>
	<!-- DataTables -->
	<script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
	<script src="../../plugins/datatables/dataTables.bootstrap.min.js"></script>
	<!-- SlimScroll -->
	<script src="../../plugins/slimScroll/jquery.slimscroll.min.js"></script>
	<!-- FastClick -->
	<script src="../../plugins/fastclick/fastclick.min.js"></script>
	<!-- AdminLTE App -->
	<script src="../../dist/js/app.min.js"></script>
	<script src="../resources/angularjs/angular.min.js"></script>
	<!-- AdminLTE for demo purposes -->
	<script src="../../dist/js/demo.js"></script>
	<script src="../role/js/role.js"></script>
	<!-- page script -->
</body>
</html>
